<template>
  <view>
    <view class='productList'>
      <view style="padding: 5px 5px;background: white">
        <uv-sticky  :zIndex="999" customNavHeight="44" offsetTop="44"  bgColor="#fff">
          <uv-search @search="search" @clear="dataList"	 shape="square" placeholder="请输入搜索内容" v-model="keyword"></uv-search>
        </uv-sticky>
      </view>

          <uv-gap height="10" v-if="schoolList.length > 0" bgColor=""></uv-gap>
          <view v-if="schoolList.length > 0">
            <uv-list>
              <uv-list-item @click="selectSchool(school)"	 :clickable="true" v-for="school in schoolList" :title="school.schoolName"></uv-list-item>
            </uv-list>
          </view>
          <Empty :show="schoolList.length<=0"/>

    </view>
  </view>
</template>
<script>
import StatusNav from '@/components/school/statusNav';
import PageBody from '@/components/school/pageBody';
import OrderList from '@/components/school/orderList';
import {mapGetters} from "vuex";
import diyJson from '@/config/diy.js';
import * as SchoolApi from '@/api/school/school'

const app = getApp();
export default {
  computed: mapGetters(['uid']),
  components: {
    StatusNav,
    PageBody,
    OrderList,
  },
  data() {
    return {
      themConfig: diyJson.commonStyle,
      keyword: '',
      pageBody: {

      },
      schoolList: [
        {
          schoolName: '武汉软件职业技术学院',
          schoolId: '1'
        }
      ],
      dataPage: {
        current: 1,
        pages: 1,
        size: 1,
        total: 0,
      }
    };
  },
  onPullDownRefresh() {

  },
  onLoad: function (options) {
    this.dataList();
  },
  methods: {
    search(){
      if (this.keyword){
        this.dataList();
      }
    },
    dataList() {
      SchoolApi.schoolListPage({schoolName: this.keyword,size:20}).then(res => {
        this.schoolList = res.data.records;
        this.dataPage.pages = res.data.pages;
        this.dataPage.current = res.data.current;
      })
    },
    selectSchool(school){
      const pages = getCurrentPages();
      let prevPage = pages[pages.length - 2];

      uni.$emit('setSchool', school);

      // 设置参数
      // #ifdef H5
      // prevPage.setSchool(school);
      // #endif

      // console.log("pages",pages)
      // console.log("prevPage['__data__']",prevPage['__data__'])

      // #ifdef MP
      // prevPage['__data__'].setSchool(school);
      // #endif

      uni.navigateBack({
        delta: 1
      });
    },
    getApp() {
      return app;
    },

  },
  onReachBottom() {
    if (this.dataPage.current < this.dataPage.pages) {
      SchoolApi.schoolListPage({schoolName: this.keyword, current: this.dataPage.current + 1}).then(res => {
        res.data.records.forEach(item => {
          this.schoolList.push(item)
        })
        this.dataPage.current = res.data.current;
        this.dataPage.pages = res.data.pages;
      })
    }
  }
}

</script>
<style scoped lang="scss">
.iconfont {
  color: #fff;
}

.listBox {
  padding: 20px 15px;
  margin-top: 154rpx;
}

.productList .search {
  width: 100%;
  height: 86rpx;
  padding-left: 23rpx;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
}

.productList .search .input {
  // width: 640rpx;
  height: 60rpx;
  background-color: #fff;
  border-radius: 50rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.productList .search .input input {
  /* #ifdef H5 */
  width: 528rpx;
  /* #endif */
  /* #ifndef H5 */
  width: 548rpx;
  /* #endif */
  height: 100%;
  font-size: 26rpx;
}

.productList .search .input .placeholder {
  color: #999;
}

.productList .search .input .iconfont {
  font-size: 35rpx;
  color: #555;
}

.productList .search .icon-pailie,
.productList .search .icon-tupianpailie {
  color: #fff;
  width: 62rpx;
  font-size: 40rpx;
  height: 86rpx;
  line-height: 86rpx;
}

.productList .nav {
  height: 86rpx;
  color: #454545;
  position: fixed;
  left: 0;
  width: 100%;
  font-size: 28rpx;
  background-color: #fff;
  margin-top: 86rpx;
  top: 0;
  z-index: 9;
}

.productList .nav .item {
  width: 25%;
  text-align: center;
}

.productList .nav .item.font-color {
  font-weight: bold;
}

.productList .nav .item image {
  width: 15rpx;
  height: 19rpx;
  margin-left: 10rpx;
}

.productList .list {
  padding: 0 30rpx;
  margin-top: 192rpx;

}

.productList .list.on {
  border-radius: 14rpx;
  margin-top: 0 !important;
  background-color: #fff;
  padding: 40rpx 0 0 0;
  // margin: 20rpx 0;
  // background-color: #fff;
}

.productList .list .item {
  width: 335rpx;
  background-color: #fff;
  border-radius: 14rpx;
  margin-bottom: 20rpx;
}

.productList .list .item.on {
  width: 100%;
  display: flex;
  padding: 0 24rpx 50rpx 24rpx;
  margin: 0;
  border-radius: 14rpx;
}

.productList .list .item .pictrue {
  position: relative;
  width: 100%;
  height: 335rpx;
}

.productList .list .item .pictrue.on {
  width: 180rpx;
  height: 180rpx;
}

.productList .list .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 20rpx 20rpx 0 0;
}

.productList .list .item .pictrue image.on {
  border-radius: 6rpx;
}

.productList .list .item .text {
  padding: 18rpx 20rpx;
  font-size: 30rpx;
  color: #222;
}

.productList .list .item .text.on {
  width: 456rpx;
  padding: 0 0 0 20rpx;
}

.productList .list .item .text .money {
  font-size: 26rpx;
  font-weight: bold;
  margin-top: 8rpx;
}

.productList .list .item .text .money.on {
  margin-top: 50rpx;
}

.productList .list .item .text .money .num {
  font-size: 34rpx;
}

.productList .list .item .text .vip {
  font-size: 22rpx;
  color: #aaa;
  margin-top: 7rpx;
}

.productList .list .item .text .vip.on {
  margin-top: 12rpx;
}

.productList .list .item .text .vip .vip-money {
  font-size: 24rpx;
  color: #282828;
  font-weight: bold;
}

.productList .list .item .text .vip .vip-money image {
  width: 46rpx;
  height: 21rpx;
  margin-left: 4rpx;
}

.noCommodity {
  background-color: #fff;
  padding-bottom: 30rpx;
  margin-top: 172rpx;
}
</style>
